<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>What is Maqetta?</title>
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
</head>
<body class="maqettadocs">
<!-- Header -->
<!--
<iframe src ="../header.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->
<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
    <a href="overview.html">Previous</a> / <a href="install.html">Next</a>
    </td></tr>
</table>


<h1>About Maqetta</h1>

<p>Maqetta is an open source technology initiative at 
Dojo Foundation that
provides WYSIWYG tooling in the cloud for HTML5 (desktop and mobile).
Maqetta allows User Experience Designers (UXD) to perform drag/drop
assembly of <em>live UI mockups</em>. </p>

<p>One of Maqetta's key
design goals is to create developer-ready UI mockups that promote
efficient hand-off from designers to developers. The user interfaces
created by Maqetta are real-life web applications that can be handed off
to developers, who can then transform the application incrementally from UI
mockup into final shipping application. While we expect the
Maqetta-created mockups often will go through major code changes,
Maqetta is designed to promote preservation of visual assets,
particularly the CSS style sheets, across the development life cycle. As
a result, the careful pixel-level styling efforts by the UI team will
carry through into the final shipping application. To help with the
designer/developer hand-off, Maqetta includes a "download into ZIP"
feature to create a ZIP image that can be imported into a developer tool workspace (e.g., Eclipse).</p>

<p>For team development, Maqetta includes a
web-based review&amp;commenting features with forum-style comments and
on-canvas annotations.</p>

<p>Maqetta came out of an internal IBM initiative to
address the visual design requirements of IBM's various UXD teams. IBM
contributed Maqetta's original code to open source to foster a community that can 
help create and maintain a strong suite of open source HTML5
visual tools.</p>

<p>Key features:</p>
<ul>
<li>Maqetta provides a WYSIWYG visual page editor for drag/drop creation of actual running user interfaces (for both desktop and mobile UIs)</li>
<li>For mobile visual composition, the user can use drag/drop authoring within an exact-dimension device silhouette, such as the silhouette of
an iPhone</li>
<li>For early-stage mockups (both desktop and mobile), Maqetta provides a quick UI sketching feature where Maqetta works like a simple drawing tool, 
where the user can create UI sketches using any combination of actual widgets, common UI clipart and 
simple drawing tools (e.g., rectangles, ovals, lines, arrows)</li>
<li>For an efficient designer/developer workflow, Maqetta provides export options that 
allows Maqetta-created UI mockups into leading developer tools such as Eclipse</li>
<li>Maqetta creates actually running HTML pages, and supports simultaneous HTML editing in either design or source views</li>
<li>Maqetta includes deep support for CSS styling (the application includes a full CSS parser/modeler)</li>
<li>The page editor includes a mechanism for organizing a UI prototype into a series of 
"application states" (aka "screens" or "panels") which allows a UI design
to define interactivity without programming</li>
<li>The application includes a web-based review and commenting feature where the
author can submit a live UI mockup for review by his team members</li>
<li>The application includes a "wireframing" feature that allows UI designers to
create UI proposals that have a hand-drawn look</li>
<li>Maqetta includes desktop and mobile theme editors for customizing the visual styling of a collection of widgets</li>
<li> Maqetta's code base has a
toolkit-independent architecture that allows for plugging in arbitrary
widget libraries and CSS themes.</li>
</ul>

<p> </p>

<p class="prevnext"><a href="home.html">Previous</a> / <a href="releasenotes/releasenotes.html">Next</a></p>

</div>  <!-- pagebody -->

<!-- Footer -->
<!--
<iframe src ="footer.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->
</body>
</html>